 <#include "admin/common/include/sysparam.html">
<div id="navModel" class="modal hide fade" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header green">

		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true"></button>
		<h4 id="myModalLabel">
			<strong>选择地区</strong>
		</h4>
	</div>
	<div class="alert alert-error " id="errtip" style="display: none;"></div>

	<div class="modal-body" style="max-height: 650px;">
		<!-- BEGIN FORM-->
		<form action="${contextPath}/Admin-Group-save.action"
			id="groupAddForm" class="form-horizontal" method="post">

			<div class="control-group">



				<div class="controls" style="margin-left: 100px;">
					<select multiple="multiple" id="my_multi_select2"
						name="my_multi_select2[]">

					</select>

				</div>

			</div>


			<div class="modal-footer">
				<button type="button" id="city_save_btn" class="btn blue">保存</button>
				<button class="btn " data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</form>
		<!-- END FORM-->
	</div>
</div>


<script type="text/html" id="cityTemplate">  
			<optgroup  data-template-bind='[{"attribute": "label", "value": "text"}]'> 
			</optgroup>   
</script>
<script type="text/html" id="nestOptionTemplate">  
			<option  data-content="text"></option>

</script>
<script>
	jQuery(document)
			.ready(
					function() {
						var data = city.cityData;

						for (var i = 0; i < data.length; i++) {
							var provinceHtml = "<optgroup label='"+data[i].text+"'></optgroup>";
							var provinceObj = $(provinceHtml);
							var cityList = data[i].children;
							for (var j = 0; j < cityList.length; j++) {
								var cityHtml = "<option>" + cityList[j].text
										+ "</option>";
								provinceObj.append(cityHtml);
							}
							$("#my_multi_select2").append(provinceObj);
						}

						$('#my_multi_select2').multiSelect({
							selectableOptgroup : true
						});
						var selectRegion = "${(selectRegionId)?if_exists}";
						bindSave(selectRegion);
					});

	function bindSave(selectRegionId) {
		$("#city_save_btn").bind("click", function() {
			var regionName = '';
			var regionNameList = new Array();
			$('.ms-selection').find('.ms-selected').each(function() {
				regionNameList.push($(this).find('span').html());
			});
			for (var i = 0; i < regionNameList.length; i++) {
				regionName += regionNameList[i];
				if (i < regionNameList.length - 1)
					regionName += ',';
			}  
			$('#' + selectRegionId).html(regionName);
			$('#navModel').modal('hide');
		});
	}
</script>
